<template>
  <div>
    <div class="app-container">
      <el-form size="mini" ref="postForm" :model="postForm" :label-position="'right'" label-width="80px">
        <el-row type="flex" justify="space-between" :gutter="20">

          <el-col :span="6">
            <el-form-item label="角色名称:">
              <el-input v-model="postForm.name" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" size="mini" @click="query()">查询</el-button>
              <el-button type="warning" size="mini" @click="addInfo()">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :height="tableHeight" :data="tableData" border>
        <el-table-column type="index" align="center" width="50">序号</el-table-column>
        <el-table-column prop="name" label="角色名称"/>
        <el-table-column
          fixed="right"
          label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="editInfo(scope.$index,scope.row)">编辑</el-button>
            <el-button v-if="scope.row.roleKey!='admin'" type="danger" size="mini"
                       @click="delInfo(scope.$index,scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          background
          layout="total,prev,pager,next,jumper,sizes"
          :total="total"
          @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          :page-sizes="[15, 30, 45, 60, 75,90,105,120,135,150]"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      center
    >
      <el-form ref="info" :rules="rules" :model="info" label-position="right" label-width="100px">
        <el-form-item label="角色名称:" prop="name">
          <el-input v-model="info.name" placeholder="请输入内容" :disabled="isShow"/>
        </el-form-item>
        <!--<el-form-item label="角色类型:" prop="roleType">-->
        <!--<el-select v-model="info.roleType" placeholder="请选择">-->
        <!--<el-option key="0" label="总公司" value="0" />-->
        <!--<el-option key="1" label="分公司" value="1" />-->
        <!--<el-option key="2" label="加油站" value="2" />-->
        <!--</el-select>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="权限key:" prop="roleKey">-->
        <!--<el-input v-model="info.roleKey" placeholder="请输入内容"></el-input>-->
        <!--</el-form-item>-->

        <el-form-item label="权限:" prop="privilege">
          <el-tree
            ref="privilegeTree"
            show-checkbox
            node-key="menuKey"
            :data="treeData"
            :props="treeProps"
            :disabled="isShow"
            :default-expand-all="true"
            :check-strictly="true"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button v-if="!isShow" type="primary" @click="addOrEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getUserId } from '@/utils/auth'
  import { page, getInfo, delInfo, addOrEdit, getTreeList } from '@/api/system/role.js'

  export default {
    data() {
      return {
        tableHeight: window.innerHeight - 180,
        userId: null,
        isShow: false,
        // 总条数
        total: 0,
        // 每页显示个数
        pageSize: 15,
        // 页码
        currentPage: 1,
        postForm: {},
        // 树结构
        treeData: [],
        // 树结构配置
        treeProps: {
          children: 'children',
          label: 'name'
        },
        info: {},
        tableData: [],
        name: null,
        menuKey: null,
        options: [],
        editIndex: 0,
        centerDialogVisible: false,
        title: '新增角色',
        rules: {
          name: [{ required: true, message: '请输入名称', trigger: 'chang' }],
          roleKey: [{ required: true, message: '请输入key', trigger: 'chang' }],
          roleType: [{ required: true, message: '请选择角色类型', trigger: 'chang' }]
        }
      }
    },
    created() {
      this.getData()
      this.getTreeList()
      this.getUserId()
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
      },
      // 获取用户id
      getUserId() {
        this.userId = getUserId()
      },
      // 获取权限树结构
      getTreeList() {
        getTreeList().then(response => {
          console.log(response.data)
          this.treeData = response.data
        })
      },
      // 分页查询
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData()
      },
      // 新增
      addInfo() {
        this.isShow = false
        this.title = '新增角色'
        this.info = {}
        this.centerDialogVisible = true
        this.$refs.privilegeTree.setCheckedKeys([])
      },
      /**
       * 编辑
       * @param row
       */
      editInfo(index, row) {
        this.isShow = false
        this.editIndex = index
        this.title = '编辑'
        this.centerDialogVisible = true
        getInfo(row.id).then(response => {
          this.info = response.data
          this.$refs.privilegeTree.setCheckedKeys(JSON.parse(this.info.privilege))
        })
      },
      showInfo(index, row) {
        this.isShow = true
        this.editIndex = index
        this.title = '查看'
        this.centerDialogVisible = true
        getInfo(row.id).then(response => {
          this.info = response.data
          this.$refs.privilegeTree.setCheckedKeys(JSON.parse(this.info.privilege))
        })
      },
      delInfo(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delInfo(row.id).then(response => {
            this.tableData.splice(index, 1)
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
      // 查询条件
      query() {
        this.name = this.postForm.name
        this.menuKey = this.postForm.menuKey
        this.currentPage = 1
        this.getData()
      },
      getData() {
        // 请求分页参数
        page(this.pageSize, this.currentPage, this.name, this.menuKey).then(response => {
          this.total = parseInt(response.count)
          this.tableData = response.data
        })
      },
      addOrEdit: function() {
        this.$refs[ 'info' ].validate((valid) => {
          if (valid) {
            addOrEdit(this.info.id, this.info.name, this.info.roleKey, JSON.stringify(this.$refs.privilegeTree.getCheckedKeys()), this.info.roleType).then(response => {
              this.centerDialogVisible = false
              if (this.info.id == null) {
                // 新增
                this.tableData.unshift(response.data)
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                // 编辑
                this.tableData.splice(this.editIndex, 1, response.data)
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
              }
            })
          }
        })
      }
    }
  }
</script>

